<template>
    <div class='messageList'>
        <loading :props="{show:loading}"></loading>
        <div v-for="item in propsMessagesList">
            <div class='messageItem' :class='getClass(item)'>
                <div v-if="item.formatTime" class="date">{{item.formatTime}}</div>
                <div class='message'>
                    <div class="label" :class="getGenderBgClass(item.gender)" @click="gotoUserProfile(item.usr_id)">
                        <LazyImg :src="filterGenderImg(item.icon)"></LazyImg>
                    </div>
                    <div class='messageLine'>
                        <div class='floatBox'>
                            <div v-show='getUserAttrShow(item)' class='userAttr'>{{item.username}}</div>
                            <div class='messageContent' :class="getClass(item) == 'right' && 'main_bg main_border'">
                                <template v-if="item.sysType == 'image'">
                                    <div class="messageImg">
                                        <div class="messageImg_loading" v-show="item.uploading"></div>
                                        <dd>
                                            <template v-if="imageSize(item.ix, item.iy)">
                                                <img :width="imageSize(item.ix, item.iy).width" :height="imageSize(item.ix, item.iy).height" :src="item.message" alt="" @click="openDialogSlider(item.id)">
                                            </template>
                                            <template v-else>
                                                <img :src="item.message" alt="" @click="openDialogSlider(item.id)">
                                            </template>
                                        </dd>
                                    </div>
                                </template>
                                <template v-else>
                                    <div class="type" v-if="showMessageType(item.sysType) && item.sysType != 'request_album'">{{showMessageType(item.sysType)}}</div>
                                    <div class="text" v-html="messageTransformation(item.message)"> </div>
                                    <div class="readMore" v-if="item.sysType && (item.sysType == 'email')" @click="showEmailInfo(item.sysMsgId, parseInt(item.senderId) != usr_id)">Read more</div>
                                    <div class="albumRequest" @click="privateAlbumRequest()" v-if="item.sysType && item.sysType == 'request_album' && item.senderId != usr_id">
                                        <span class="main_bg">{{item.can_access_my_private_ablum ? 'Request Accepted' : 'Accept Request'}}</span>
                                    </div>
                                </template>
                            </div>
                            <div class="message_fail" v-if="item.error"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import * as API from '../api';
import LazyImg from './LazyImg'
import loading from './Loading'
import globalMixin from '../common/globalMixin'

//chatroom & chat used
export default {

    name: 'messageList',

    props: ['propsMessagesList', 'propsOptionFun', 'propsType', 'loading'],

    components: {
        LazyImg,
        loading
    },

    data() {
        return {}
    },

    created() {
        //console.log(this.propsMessagesList);
    },

    mixins: [globalMixin],

    computed: {
        usr_id: function() {
            return this.$store.state.user.userInfo.account.usr_id;
        },
    },

    methods: {

        showEmailInfo(message_id, is_receiver) {
            var getListFun = this.propsOptionFun();
            getListFun.showEmailInfo(message_id, is_receiver);
        },

        privateAlbumRequest() {
            var getListFun = this.propsOptionFun();
            getListFun.privateAlbumRequest();
        },

        openDialogSlider(id) {
            var getListFun = this.propsOptionFun();
            getListFun.openDialogSlider(id);
        },

        getClass: function(item) {
            let className = 'left';
            if (parseInt(item.usr_id) == parseInt(this.usr_id)) {
                className = 'right';
            }
            return className;
        },

        getUserAttrShow: function(item) {
            let bool = true;
            if (parseInt(item.usr_id) == parseInt(this.usr_id)) {
                bool = false;
            }
            if (this.propsType == 'chat') {
                bool = false;
            } else if (this.propsType == 'message') {
                bool = false;
            }
            return bool;
        },

        showMessageType(type) {
            let typeStr = '';
            switch (type) {
                case 'email':
                    typeStr = 'EMALI';
                    break;
                case 'wink':
                    typeStr = 'WINK';
                    break;
                case 'request_album':
                    typeStr = 'sysTypeRequest_album';
                    break;
                default:
                    typeStr = '';
            }
            return typeStr;
        },

        imageSize(width, height) {
            if (typeof(width) == 'undefined' || typeof(height) == 'undefined') {
                return {};
            }
            let maxNum = 150,
                minNum = 60;
            width = parseInt(width);
            height = parseInt(height);

            if (width > maxNum || height > maxNum) {
                if (width > height) {
                    height = height / (width / maxNum);
                    width = maxNum;
                } else {
                    width = width / (height / maxNum);
                    height = maxNum;
                }
            }

            return { height: _.max([height, minNum]), width: _.max([width, minNum]) };
        },

        messageTransformation(message) {
            let str = message;
            if (str && str.replace) { //or int
                str = str.replace(/\n/g, '<br>');
            }
            return str;
        },

    }
}

</script>
<style scoped>
.messageList {}

.messageList .messageItem {
    position: relative;
    padding: 10px;
    overflow: hidden;
}

.messageList .date {
    text-align: center;
    font-size: 12px;
    line-height: 30px;
    color: #999999;
    height: 30px;
}

.messageList .label {
    width: 50px;
    height: 50px;
    overflow: hidden;
    position: relative;
    border-radius: 50px;
    z-index: 1;
    background-size: 50px 50px;
    border: 0px solid #ccc;
    -webkit-mask-image: -webkit-radial-gradient(circle, white, black);
    background: url(../assets/default_avatar.png) center center no-repeat #ccc;
    background-size: 50px 50px;
}

.messageList .messageImg .messageImg_loading {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.6);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 20px auto;
    background-image: url(../assets/max_loading.gif);
}

.messageList .messageImg dd {
    width: 100%;
    height: 100%;
    display: block;
    background-color: rgba(0, 0, 0, 0.6);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 20px auto;
    background-image: url(../assets/max_loading.gif);
    background-color: #f3f3f3;
}

.messageList .messageImg {
    position: relative;
    z-index: 1;
    min-width: 50px;
    min-height: 38px;
    overflow: hidden;
    border-radius: 3px;
    background-color: #fff;
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto 38px;
    background-image: url(../assets/ico_message_not_found.png);
}

.messageList .messageImg img {
    max-width: 150px;
    min-width: 60px;
    max-height: 150px;
    min-height: 60px;
    display: block;
}

.messageList .messageLine {
    overflow: hidden;
    float: left;
    max-width: 70%;
}

.messageList .left .label,
.messageList .left .messageLine,
.messageList .left .floatBox {
    float: left;
}

.messageList .right .label,
.messageList .right .messageLine,
.messageList .right .floatBox {
    float: right;
}

.messageList .userAttr {
    text-indent: 16px;
    height: 20px;
    color: #999999;
    font-size: 14px;
}

.messageList .messageContent {
    border-radius: 5px;
    position: relative;
    font-size: 13px;
    min-width: 30px;
    /*max-width: 70%;*/
    margin: 8px 15px;
    padding: 5px;
    word-break: break-word;
    border: 1px solid #fff;
    min-height: 20px;
}

.messageList .messageContent .type {
    border-bottom: 1px solid #ccc;
    min-width: 70px;
}

.messageList .messageContent .readMore {
    margin-top: 4px;
    text-align: right;
    font-size: 12px;
}

.messageList .messageContent .albumRequest {
    text-align: center;
}

.messageList .messageContent .albumRequest span {
    margin-top: 4px;
    display: inline-block;
    text-align: center;
    color: #fff;
    padding: 3px 10px;
    line-height: 18px;
    border-radius: 3px;
}

.messageList .left .messageContent {
    background: #fff;
    color: #333333;
}

.messageList .right .messageContent {
    color: #fff;
    float: right;
}

.messageList .left .messageContent:after {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: -10px;
    top: 10px;
    border: 6px solid;
    border-color: #FFF #FFF transparent transparent;
}

.messageList .right .messageContent:after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    right: -11px;
    top: 9px;
    border: 6px solid;
    border-top-color: inherit;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: inherit;
}

.messageList .showEmailarea {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #f6f7f9;
    z-index: 999;
    overflow: hidden;
}

.messageList .showEmailarea .showEmailarea_head {
    position: absolute;
    z-index: 9;
    background-color: #181B20;
    color: #fff;
    height: 44px;
    width: 100%;
    text-align: center;
}

.messageList .showEmailarea .showEmailarea_head .title {
    width: 200px;
    overflow: hidden;
    display: inline-block;
    text-overflow: ellipsis;
    line-height: 44px;
    font-size: 20px;
}

.messageList .showEmailarea .showEmailarea_head .back {
    height: 44px;
    width: 44px;
    position: absolute;
    left: 0;
    top: 0;
    cursor: pointer;
    display: block;
    background-image: url(../assets/back.png);
    background-size: 25px auto;
    background-repeat: no-repeat;
    background-position: center;
}

.messageList .showEmailarea .showEmailarea_content {
    padding: 64px 10px 60px;
    height: 100%;
    text-align: left;
    overflow-x: hidden;
    overflow-y: scroll;
    font-size: 13px;
    box-sizing: border-box;
}

.messageList .showEmailarea .showEmailarea_bottom {
    position: absolute;
    z-index: 9;
    left: 0;
    bottom: 0;
    width: 100%;
    background: #fff;
    text-align: center;
    padding: 10px 20px;
    box-sizing: border-box;
}

.messageList .messageLine .message_fail {
    width: 20px;
    height: 20px;
    margin-top: 10px;
    margin-right: 10px;
    float: right;
    border-radius: 50%;
    background: url(../assets/warning.png) no-repeat center;
    background-size: 20px;
}

</style>
